<script setup lang="ts">
import {ComputedRef, WritableComputedRef, Ref, computed, ref} from "vue";

const count: Ref<number> = ref<number>(1)
// const maxCount: ComputedRef<number> = computed<number>(() => count.value * 10)
const maxCount: WritableComputedRef<number> = computed<number>({
  get() {
    console.log("get")
    return count.value * 10
  },
  set(newValue: number) {
    count.value -= 1
    console.log("set", newValue)
  }
})

const handleAddCount: () => void = (): void => {
  count.value++
}
const handleAddMaxCount = () => {
  maxCount.value--
}
</script>

<template>
  <div class="app">
    <h1>count的值是:{{ count }}</h1>
    <h1>放大10倍count的值是:{{ maxCount }}</h1>
    <button @click="handleAddCount">count +1</button>
    <button @click="handleAddMaxCount">maxCount -1</button>
  </div>
</template>
